<template>
    <NCard title="转账卡配置">
        <NForm :model="form" inline>
            <NFormItem label="开卡费" path="cardPrice">
                <NInput v-model:value="form.cardPrice" placeholder="请输入">
                    <template #suffix> USDT </template>
                </NInput>
            </NFormItem>
            <NFormItem label="转入费率" path="carryInRate">
                <NInput v-model:value="form.carryInRate" placeholder="请输入">
                    <template #suffix>%</template>
                </NInput>
            </NFormItem>
            <NFormItem label="转出费率" path="rollOutRate">
                <NInput v-model:value="form.rollOutRate" placeholder="请输入">
                    <template #suffix>%</template>
                </NInput>
            </NFormItem>

            <NFormItem label="HKD-CNY汇率" path="remitRate">
                <NInput v-model:value="form.remitRate" placeholder="请输入">
                    <template #suffix>HKD-CNY</template>
                </NInput>
            </NFormItem>

            <NFormItem label="汇款到内地手续费" path="remitfee">
                <NInput v-model:value="form.remitfee" placeholder="请输入">
                    <template #suffix>HKD</template>
                </NInput>
            </NFormItem>
            <NFormItem label="汇款到海外手续费" path="internationalRemitFee">
                <NInput v-model:value="form.internationalRemitFee" placeholder="请输入">
                    <template #suffix>HKD</template>
                </NInput>
            </NFormItem>
            <NFormItem>
                <NButton type="primary" @click="submit" :loading="loading">确定</NButton>
            </NFormItem>
        </NForm>
    </NCard>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { updateTransferCardConfig } from '@/api/config'
import { useMessage, type FormRules } from 'naive-ui'

const { config } = defineProps<{
    config: Api.Config.TransferCardConfig | null
}>()

const message = useMessage()
const form = ref<Api.Config.TransferCardConfig>({
    cardPrice: '',
    carryInRate: '',
    rollOutRate: '',
    remitRate: '',
    remitfee: '',
    internationalRemitFee: ''
})

watchEffect(() => {
    if (config) {
        Object.assign(form.value, config)
        // form.value.cardPrice = config.cardPrice
        // form.value.carryInRate = config.carryInRate
        // form.value.rollOutRate = config.rollOutRate
        // form.value.remitRate = config.remitRate
        // form.value.remitfee = config.remitfee
    }
})

const loading = ref(false)
async function submit() {
    loading.value = true
    const [err, res] = await updateTransferCardConfig(form.value)
    loading.value = false
    if (!err && res) {
        message.success('操作成功')
    }
}
</script>
